<template>
    <div>
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in todoList" :key="index" 
            :class="{
            completed: item.isCheck,
            editing: isShow == index,}">
            <!-- completed：是否完成-->
            <!-- editing：是否显示编辑input框 -->
                <div class="view">
                    <input class="toggle" type="checkbox" :v-model="item.isCheck" @click="changeCheck(item,index)">
                    <label @dblclick="handleEdit(item,index)">{{item.text}}</label>
                    <button class="destroy" @click="removeTodo(index)"></button>
                </div>
                <input class="edit" 
                type="text" 
                v-model="item.text"
                v-focus
                @blur="doneEdit(item,index)"
                @keyup.enter="doneEdit(item,index)"
                @keyup.esc="cancelEdit()">
            </li>
        </ul>
    </div>
</template>

<script>
import { setTodoList } from "@/utils/localStorageTodo";
export default {
  props: {
    todoList: {
      type: Array
    }
  },
  data() {
    return {
      isShow: null
    };
  },
  methods: {
    handleEdit(item, index) {
      // 双击编辑
      this.isShow = index;
    },
    doneEdit(item,index) {
      // 完成编辑
      this.$parent.parentDoneEdit(item, index);
      this.isShow = null;
    },
    cancelEdit() {
      // 取消编辑
      this.isShow = null;
    },
    removeTodo(index) {
      // 删除
      this.$parent.parentRemoveTodo(index);
    },
    changeCheck(item,index) {
      // 已完成？未完成？
      item.isCheck = !item.isCheck
      this.$parent.parentChangeCheck(item,index);
    }
  },
  directives: {
    focus: function(el) {
      el.focus();
    }
  }
};
</script>

<style scoped src="../assets/style/todolist.css">
</style>